<template>
	<view class="test-page">
		<div class="statusBar" :style="{
			height:`${statusBarHeight}px`
		}"></div>
		<view class="title-box" :style="{top:`${statusBarHeight}px`,height:`${topHeight}px`,padding:`${capsulePadding}px ${pagePadding}px`}">
			<view class="page-title">
				<i class="clearIcon" @click="goBack"></i>{{pageTitle}}
			</view>
		</view>
		<div :style="{
			height:`${statusBarHeight + topHeight}px`
		}"></div>
		<view class="test-page_container">
			
			<view class="card">
				<view class="card-title">
					基础信息
				</view>
				<view class="card-item">
					<view class="card-item_label">
						客户名称
					</view>
					<view class="card-item_value">
						南京钢铁有限公司
					</view>
				</view>
				
				<view class="card-item">
					<view class="card-item_label">
						客户户号
					</view>
					<view class="card-item_value">
						3201134099877
					</view>
				</view>
				
				<view class="card-item">
					<view class="card-item_label">
						楼宇名称
					</view>
					<view class="card-item_value">
						xx1号楼
					</view>
				</view>
				<view class="card-item">
					<view class="card-item_label">
						楼宇编号
					</view>
					<view class="card-item_value">
						iz-001-31231312341
					</view>
				</view>
				<view class="card-item">
					<view class="card-item_label">
						边设备SN
					</view>
					<view class="card-item_value">
						2025001001
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title">
					测点详情
				</view>
				<view class="cedian">
					<image src="/static/images/worker/cedian_bg.png" mode=""  class="cedian_bg"></image>
					<image src="/static/images/worker/cedian.png" mode=""  class="cedian_img"></image>
					<view class="cedian_content">
						<view class="flex align-center justify-between u-margin-bottom-10">
							<view class="cedian_name">
								设备名称xxxx
							</view>
							<view class="cedian_num">
								88
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="cedian_msg">
								测点(24023239)
							</view>
							<view class="cedian_msg">
								测点(24023239)
							</view>
						</view>
					</view>
				</view>
				<view class="cedian">
					<image src="/static/images/worker/cedian_bg.png" mode=""  class="cedian_bg"></image>
					<image src="/static/images/worker/cedian.png" mode=""  class="cedian_img"></image>
					<view class="cedian_content">
						<view class="flex align-center justify-between u-margin-bottom-10">
							<view class="cedian_name">
								设备名称xxxx
							</view>
							<view class="cedian_num">
								88
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="cedian_msg">
								测点(24023239)
							</view>
							<view class="cedian_msg">
								测点(24023239)
							</view>
						</view>
					</view>
				</view>
				<view class="cedian">
					<image src="/static/images/worker/cedian_bg.png" mode=""  class="cedian_bg"></image>
					<image src="/static/images/worker/cedian.png" mode=""  class="cedian_img"></image>
					<view class="cedian_content">
						<view class="flex align-center justify-between u-margin-bottom-10">
							<view class="cedian_name">
								设备名称xxxx
							</view>
							<view class="cedian_num">
								88
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="cedian_msg">
								测点(24023239)
							</view>
							<view class="cedian_msg">
								测点(24023239)
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title">
					报文详情
				</view>
				<view class="card-content">
					s1 = "[{\"name\":\"小明\",\"age\":11},{"name!"\"小红\",\"age\":15},{\"name\":\"小玉|"\"age\":17}]"
				</view>
			</view>
			
			<view class="btns">
				<button class="btn-item ok" @click="handleSubmit">确定</button>
				<button class="btn-item close" @click="handleSubmit">取消</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const capsulePadding = ref(0);
	const pagePadding = ref(0);
	const pageTitle = ref('召测')
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	}
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度
		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		capsulePadding.value = res.top - statusBarHeight.value
	});
	
	const formData = ref({
		value1:"",
		value2:"",
		value3:"",
		value4:"",
	})
	const rules = {}
	const handleSubmit = () => {
		
	}
	
</script>

<style scoped lang="scss">

	.test-page {
		background: #f1f1f1;
		min-height: 100vh;
		&_container{
			padding: 20rpx;
		}
	}
	
	.btns{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		.btn-item{
			width:calc(50% - 40rpx);
			margin: 0;
			border-radius: 23px;
		} 
		.ok{
			background-color: $uni-color-project;
			color: #fff;
		}
		.close{
			background-color: #f1f1f1;
			color: $uni-color-project;
			border: 1px solid $uni-color-project;
		}
	} 
	.card{
		width: 100%;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		&-title{
			font-size: 32rpx;
			font-weight: bold;
		}
		&-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2px solid #ececec;
			padding: 30rpx 0;
			&:last-child{
				border-bottom: none
			}
			&_label{
				font-size: 28rpx;
				color:#999;
			}
			&_value{
				font-size: 28rpx;
			}
		}
		&-content{
			margin-top: 10rpx;
			font-size: 28rpx;
			line-height: 1.5;
		}
	}
	
	.cedian{
		width: 100%;
		// height: 144rpx;
		position: relative;
		margin-top: 10rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&_bg{
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			
			
		}
		&_img{
			width: 134rpx;
			height: 94rpx;
			transform-style: preserve-3d;
			/* 在Z轴上移动 */
			transform: translateZ(1px);
		}
		
		&_content{
			width: calc(100% - 134rpx);
			padding: 0 20rpx;
			transform-style: preserve-3d;
			/* 在Z轴上移动 */
			transform: translateZ(1px);
		}
		
		&_name{
			font-size: 34rpx;
			font-weight: bold;
		} 
		&_num{
			font-size: 40rpx;
			font-weight: bold;
			color: $uni-color-project;
		} 
		&_msg{
			width:calc(50% - 5rpx);
			font-size:26rpx;
			text-align: center;
			background-color: rgb(203,228,252)
		}
	}
</style>
